<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>故障诊断工具</title>
    <!--<base href="http://localhost:63342/NodeTest/"/>-->
    <link rel="stylesheet" href="../css/main.min.css">
    <script src="../js/main.min.js"></script>
    <script src="../base/core.js"></script>
    <style media="print">
        .no-print { display: none }
        .page-next{ page-break-after: always }
    </style>
</head>
<body ng-app="myApp" ng-controller="componentController">
<div class="panel">
    <div class="panel-heading">部件管理&nbsp;<a href="javascript:;" class="btn btn-default" ng-click="appendComponent()">添加新元件</a></div>
    <div class="panel-body">
        <table class="table table-responsive table-bordered">
            <thead><tr>
                <th>部件ID</th><th>部件名</th><th>操作</th>
            </tr></thead>
            <tbody>
            <tr ng-repeat="component in components track by $index" ng-class="component.$state">
                <td>{{component.id}}</td>
                <td>
                    <span ng-hide="component.$onEdited">{{component.name}}</span>
                    <input ng-show="component.$onEdited" class="form-control" placeholder="元件名称" data-ng-model="component.name" />
                    <input ng-show="component.$onEdited" type="button" class="btn btn-default" ng-click="persistComponent(component)" value="确认修改">
                </td>
                <td><a href="javascript:;" class="btn btn-default" ng-click="modifyComponent(component)">修改元件</a></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<script>
    "use strict";

    function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

    var app = angular.module("myApp", []);

    app.controller("componentController", ['$scope', '$compile', '$sce', function ($scope, $compile) {
        $scope.toJSON = function (val) {
            return angular.toJson(val, true);
        };

        $scope.components = ComponentNode.components;
        ComponentNode.loadComponents.callbacks.push(function () {
            $scope.components = ComponentNode.components;
            $scope.$apply();
        });
        ComponentNode.loadComponents();

        $scope.modifyComponent = function (component) {
            component.$onEdited = true;
        };

        $scope.persistComponent = function(component){
            if(component.$state!='new'){
                component.$state='dirty';
            }
            component.$onEdited = false;
            component.persist(function(){ComponentNode.loadComponents()});
        };

        $scope.appendComponent = function () {
            $scope.components.push(new ComponentNode());
        };

    }]);
</script>
</body>
</html>